<template>
  <el-dialog
    title="查看记录"
    :visible.sync="dialogVisible"
    width="1000px"
  >
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane
        label="扣款记录"
        name="deduct"
      >
        <el-table
          :data="tableData"
          border
        >
          <el-table-column
            align="center"
            label="期数"
            width="70"
          >
            <template slot-scope="scope">
              <span>第{{scope.row.which_period}}期</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="租期"
          >
            <span>{{viewItem.begin_time}}至{{viewItem.end_time}}</span>
          </el-table-column>
          <el-table-column
            align="center"
            label="金额"
            prop="rent"
          ></el-table-column>
          <el-table-column
            align="center"
            label="支付状态"
          >
            <template slot-scope="scope">
              <span>{{scope.row.lease_status}}</span>
              <!-- <el-tag :type="scope.row.status>0?'success':'danger'">{{scope.row.status==1?'已支付':scope.row.status==2?'已退款':scope.row.status==3?'已买断':'未支付'}}</el-tag> -->
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="扣款时间"
            prop="create_time"
          ></el-table-column>
          <el-table-column
            align="center"
            label="支付流水号"
            prop="out_trade_no"
          ></el-table-column>
          <el-table-column
            align="center"
            label="扣款状态"
            prop="pay_type_status"
          ></el-table-column>
          <el-table-column
            align="center"
            label="原因"
            prop="failReason"
            width="180"
          ></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane
        label="短信记录"
        name="msg"
      >
        <el-table
          :data="smsData"
          border
        >
          <el-table-column
            align="center"
            label="发送时间"
            width="100"
            prop="create_time"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="content"
            label="发送内容"
          ></el-table-column>
          <el-table-column
            align="center"
            label="发送状态"
            width="100"
          >
            <template slot-scope="scope">
              <span>{{scope.row.send_status==1?'发送成功':'发送失败'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="原因"
            prop="reason"
            width="180"
          ></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        type="primary"
        @click="dialogVisible=false"
      >关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getLeaseFlow, getOverdueSmsLog } from "@/api/finance";
export default {
  props: ['viewItem'],
  data() {
    return {
      activeName: 'deduct',
      dialogVisible: false,
      tableData: [],
      smsData: []
    }
  },
  methods: {
    handleClick(tab, event) {
      this.activeName = tab.name;
      if (this.activeName === 'deduct') {
        this.getDeduct();
      } else {
        this.getSmsLog();
      }
    },
    getSmsLog() {
      getOverdueSmsLog(this.viewItem.lease_id).then(res => {
        this.smsData = res || [];
      })
    },
    getDeduct() {
      const { order_id, lease_id } = this.viewItem;
      getLeaseFlow({
        orderId: order_id,
        leaseId: lease_id
      }).then(res => {
        this.tableData = res || [];
      })
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getDeduct();
      } else {
        this.activeName = 'deduct';
      }
    }
  }
}
</script>

<style>
</style>